<!doctype html>
<html id="black">

<head>
  <title>饮料 | 星巴克</title>
  <!-- CSS -->
  <link rel='stylesheet' href='https://www-static.chinacdn.starbucks.com.cn/prod/assets/styles.css?202412032013'>
  <script async charset="UTF-8"
    src="https://active.starbucks.com.cn/sensorsdata/JS%20SDK/sa-sdk-javascript-1.22.7/sensorsdata.min.js"></script>
</head>

<style>
  .black {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
</style>

<body class='lang-zh page-menu' ontouchstart=''>
  <script>
    var isChrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) && (navigator.vendor.toLowerCase().indexOf('google') > -1) || navigator.userAgent.match('CriOS'));
    if (isChrome) document.body.classList.add('chrome');
  </script>

  <div id='app-view-wrapper'>
    <!-- Navigation panel -->





    <nav id='nav'>
      <div id='placeholder-element'></div>
      <div class='container'>
        <header class='header'>
          <a class='logo' href='/index.html'>
            <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg' alt='星巴克' />
          </a>
          <div class='primary'>
            <ul>
              <li class='stores'>
                <a>
                  门店
                </a>
              </li>
              <li class='account'>
                <a>
                  我的账户
                </a>
              </li>
              <li class='menu'>
                <a class='active'>
                  菜单
                </a>
              </li>
            </ul>
          </div>
          <a class='icon trigger'>
            <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg' />

          </a>
        </header>
        <div class='body'>
          <nav class='container middle secondary'>
            <div class='display-1'>菜单</div>
            <div class='tabs-wrapper'>
              <ul class='subcategories'>
                <li>
                  <a id='side_menu_all' href='/index.html' class='active'>
                    全部
                  </a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
      <div class='overlay ' id='nav-overlay'>
        <div class='container'>
          <header class='header'>
            <a class='logo' href='/'>
              <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg' alt='星巴克' />
            </a>
            <button class='icon close'>Close</button>
          </header>
        </div>
      </div>

    </nav>
    <style>
      @media (min-width: 1025px) {
        #terms-notes {
          margin-left: 30%;
          width: 69%;
        }

        #placeholder-element {
          display: none;
        }
      }

      .terms-notes {
        position: fixed;
        display: none;
        width: 100%;
        padding: 4px 16px;
        background-color: #0bac69;
        z-index: 999;
      }

      .terms-notes p {
        margin: 0;
        padding-right: 18px
      }

      .terms-notes p a {
        width: 100%;
        margin: 0;
        color: #ffffff;
      }
    </style>

    <script>
      var pathname = window.location.pathname;
      var termsNotes = document.getElementById('terms-notes')
      if ((pathname === '/' || pathname === '') && termsNotes) {
        termsNotes.style.display = 'block';
        document.getElementById('terms-notes-zh').style.display = 'block';
        var placeholderElement = document.getElementById('placeholder-element');
        placeholderElement.style.height = termsNotes.offsetHeight + 'px';
      }
      if ((pathname === '/en' || pathname === '/en/') && termsNotes) {
        termsNotes.style.display = 'block';
        document.getElementById('terms-notes-en').style.display = 'block';
        var placeholderElement = document.getElementById('placeholder-element');
        placeholderElement.style.height = termsNotes.offsetHeight + 'px';
      }
    </script>


    <!-- Page content -->
    <section id='content' style="padding-top: 0;">

      <style>
        .product {
          padding-top: 36px;
          position: relative;
        }

        .caption {
          position: absolute;
          top: 0;
          width: 100%;
        }

        .tips {
          display: inline-block;
          width: 100%;
          padding: 12px 0 0 24px;
          margin-top: 48px;
          color: rgba(0, 0, 0, 0.38);
          font-size: 1.4rem;
        }

        #app-view-wrapper,
        #content {
          height: 100%;
        }

        #content {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
      </style>

      <div style="height: 100%;position: relative;z-index: 333;">

        <iframe id="temporaryMenu" style="border: 0;" height="100%" width="100%"
          src="https://artwork.starbucks.com.cn/mobile/componentization/index.html?pageId=eb495667-4c4b-4b41-b512-1ffc613149cc"></iframe>

      </div>

      <div class='overlay' id='menu-search-overlay'>
        <header class='header'>
          <button class='icon close'>Close</button>
        </header>
        <div class='body'>
          <div class='field search'>
            <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-search.svg' class='icon' />
          </div>
          <div id='menu-search-empty'></div>
          <ul class='grid columns-4 padded-2' id='menu-search-results'></ul>
        </div>
      </div>
      <div id='app-notification'></div>
    </section>
    <div id='app-loading'></div>
    <div id='app-auth'></div>
  </div>
</body>

</html>